<template>
	<view class="propertypay">
		<view class="items" v-for="(item,index) in 2" :key="index">
			<view class="items-title">
				<view class="" style="font-size: 28rpx;">
					待缴金额
				</view>
				<view class="items-price">
					<text style="font-size: 30rpx;">￥</text><text style="font-size: 45rpx;">3000.00</text>
				</view>
			</view>
			<view class="item-content">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../../../static/icons/位置.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<text style="font-size: 28rpx;color: #9a9a9a;">南航碧桂园小区01栋5单元401</text>
				</view>
			</view>
			<view class="item-Btn">
				<button class="Btn" style="background-color: #e6f1ff;color: #006eff;" @click="payrecord">缴费记录</button>
				<button class="Btn" style="background-color: #006eff; color: white;" @click="goenterpay">缴费</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	const payrecord = () => {
		uni.navigateTo({
			url: "/pages/server/views/PayRecord/PayRecord"
		})
	}
	const goenterpay = () => {
		uni.navigateTo({
			url: '/pages/server/views/EnterPay/EnterPay'
		})
	}
</script>

<style lang="scss">
	.propertypay {
		height: calc(100vh - 60rpx);
		background-color: #fbfbfc;
		padding: 30rpx;

		.items {
			padding: 30rpx;
			border: 2rpx solid #f5f5f5;
			background-color: white;
			margin-bottom: 30rpx;

			.items-title {
				border-bottom: 2rpx dashed #f2f2f2;
				border-width: 5rpx;
				padding-bottom: 30rpx;

				.items-price {
					color: #f46363;
					margin-top: 10rpx;
				}
			}

			.item-content {
				margin: 20rpx 0rpx;
			}

			.item-Btn {
				display: flex;
				margin-top: 30rpx;

				.Btn {
					width: 300rpx;
					font-size: 30rpx;
					border: none;
				}
			}
		}
	}
</style>